<template>
	<view>
		<!--pages/shop_new/selectAddress/selectAddress.wxml-->
		<view class="wrapper" :style="'padding-top: ' + header_rect.height + 'px'" v-if='config'>
			<view class="header" id="header">
				<view class="search-box border-b bg">
					<view @tap="selectCity"  :hidden="config.many_city == 0 || config.config.map_config == 'google'">
						<text class="iconfont icon-dingwei1 mr5"></text>
						<text class="mr5">{{ city_name }}</text>
						<text class="iconfont icon-xiala mr5"></text>
					</view>
					<view class="search-input">
						<text class="iconfont icon-sousuo"></text>
						<input :placeholder="placeholder" placeholder-style="color:#999;" :value="inputValue" @focus="getFocus" @input="inputAddress"></input>
						<text class="iconfont icon-cha1" @tap="clearInputValue" :hidden="inputValue == ''"></text>
					</view>
				</view>

				<view class="current-adress bg">
					<view class="title"></view>
					<view class="adress-box">
						<view @tap="selectAddress($event)" data-name="current">
							<text v-if="current_address.address_name">{{current_address.address_name}}</text>
							<block v-else>
								<lang keywords="定位中"></lang>
							</block>
						</view>

						<!-- #ifdef MP-WEIXIN -->
						<button :style="'color:' + mobile_head_color" class="locate-btn" hover-class="locate-hover" :open-type="openType"
						 @tap="relocation" bindopensetting="relocation">
						<!-- #endif -->

						<!-- #ifdef H5 -->
						<button :style="'color:' + mobile_head_color" class="locate-btn" hover-class="locate-hover" @tap="relocation">
							<!-- #endif -->

							<text class="iconfont icon-locate mr5"></text>
							<lang keywords="重新定位"></lang>
						</button>
					</view>
				</view>
			</view>

			<view class="adress-list bg">
				<view class="title" v-if="myAddress.length > 0">
					<text class="iconfont icon-shouye mr5"></text>
					<lang keywords="我的收货地址"></lang>
					<navigator :style="'color:' + mobile_head_color" url="/pages/my/address_add" class="add-address" hover-class="add-hover">
						<text class="iconfont icon-jia1"></text>
						<lang keywords="新增地址"></lang>
					</navigator>
				</view>
				<view class="adress border-b" v-for="(item, index) in myAddress" :key="item.adress_id" @tap="selectAddress($event)" data-name="myAddress"
				 :data-index="index">
					<view class="desc">{{item.show_address}}</view>
					<view class="info">
						<text>{{item.name}}</text>
						<block v-if="item.sex == 1">
							<lang keywords="先生"></lang>
						</block>
						<block v-if="item.sex == 2">
							<lang keywords="女士"></lang>
						</block>
						<text>{{item.phone_show}}</text>
					</view>
				</view>

				<view class="title" v-if="nearbyAddress && nearbyAddress.pois.length > 0">
					<text class="iconfont icon-dingwei1 mr5"></text>
					<lang keywords="附近地址推荐"></lang>
				</view>
				<view class="adress near border-b" v-for="(item, index) in nearbyAddress.pois" :key="index" @tap="selectAddress($event)"
				 data-name="nearbyAddress" data-tag="pois" :data-index="index">
					<text class="desc">{{item.name}}</text>
				</view>
			</view>

		</view>

		<view class="mask" :hidden="!showMask" @tap="closeMask">
			<view class="adress-list">
				<scroll-view scroll-y="true" style="height:100%;">
					<view>
						<view class="adress" v-for="(item, index) in searchAddressList" :key="index" @tap="selectAddress($event)" data-name="searchAddressList"
						 :data-index="index">
							<view class="desc">
								<text :class="(i.is_high ? 'active' : '' )" v-for="(i, index2) in item.name_arr" :key="index2">{{i.value}}</text>
								<text class="distance" v-if="item.distance">{{item.distance}}km</text>
							</view>
							<view class="info">
								<text>{{item.address}}</text>
							</view>
						</view>

					</view>
				</scroll-view>

			</view>
		</view>

	</view>
</template>

<script>
	import common from '../../../utils/common.js';
	var app = getApp();
	var _this;
	export default {
		data() {
			return {
				header_rect: '',
				// 头部节点信息
				city_name: '',
				current_address: '',
				// 当前位置
				nearbyAddress: '',
				// 当前位置和附近地址推荐
				myAddress: [],
				// 收获地址
				searchAddressList: [],
				// 搜索地址
				showMask: false,
				// 是否显示蒙层
				inputValue: '',
				// 输入框的值
				openType: 'openSetting',
				timer: '',
				placeholder: '请输入您的收货地址',
				config: ''
			};
		},

		onShow() {
			var kuaidian_city = wx.getStorageSync('kuaidian_city');
			
			console.log('kuaidian_city111', kuaidian_city);

			if (kuaidian_city) {
				this.city_name = kuaidian_city.city_name
			} 
			// 获取收获地址
			getMyAddress();
		},

		onLoad(options) {
			_this = this;
			common.setMainColor(_this);
			wx.setNavigationBarTitle({
				title: common.changeTxt('选择收货地址')
			});
			_this.placeholder = common.changeTxt('请输入您的收货地址')
			// 获取头部的高度

			getNodeInfo('#header', 'header_rect'); 
			
			// 获取缓存的地址
			var delivery_address = app.globalData.delivery_address
			if (delivery_address) {
				_this.current_address = delivery_address
				_this.city_name = delivery_address.city_name
				// 获取附近地址推荐
				getNearbyAddress();
			}

			// #ifdef MP-WEIXIN
			// 检查位置是否授权
			getAuthorization();
			// #endif
		},
		methods: {
			// 选择城市
			selectCity () {
				uni.navigateTo({
					url: '/pages/index/select_address?from=kuaidian'
				})
			},

			// 输入框获取到焦点
			getFocus() {
				_this.showMask = true
			},

			// 输入地址进行搜索
			inputAddress(e) {
				clearTimeout(_this.timer);

				if (e.detail.value != '') {
					_this.inputValue = e.detail.value

					_this.timer = setTimeout(() => {
						searchAddress();
					}, 400);
				}
			},

			// 关闭蒙层
			closeMask() {
				_this.showMask = false
				_this.inputValue = ''
				_this.searchAddressList = []
			},

			// 清除输入框的值
			clearInputValue() {
				_this.inputValue = ''
				_this.searchAddressList = []
			},

			// 选中地址
			selectAddress(e) {
				console.log('选中地址', e)
				var list = e.currentTarget.dataset.name;

				if (list == 'current') {
					var data = _this.current_address;
				} else {
					var index = e.currentTarget.dataset.index;
					var tag = e.currentTarget.dataset.tag ? e.currentTarget.dataset.tag : '';
					var data = tag ? _this[list][tag][index] : _this[list][index];
					data.city_name = tag ? _this.city_name : _this[list][index].city_txt;
				}
				if (list == 'searchAddressList' && data.place_id) {
					getAddressByPlaceId(data.place_id, data.city_name);
					return;
				}
				app.globalData.delivery_address = data
				common.navigateBack()
			},

			// 重新定位
			relocation(e) {
				var is_switch = _this.config.config.map_config == 'baidu' ? 'baidu' : '';
				// #ifdef H5
				common.locationFun(this.getLocation, this, is_switch)
				// #endif
				
				// #ifdef MP-WEIXIN || MP-ALIPAY
				var openType = _this.openType;
				if (openType == '') {
					common.getLocation('getLocation', this, is_switch);
				} else if (e.detail.authSetting['scope.userLocation'] == true) {
					_this.openType = ''
					common.getLocation('getLocation', this, is_switch);
				}
				// #endif
				
			},

			getLocation(data) {
				console.log('获取定位信息', data)
				if (data.lng || data.lat) {
					data.address_name = data.name;
					data.city_name = data.city;
					_this.current_address = data; 
					// 获取附近地址推荐
					getNearbyAddress('relocation');
				}
			}
		}
	};
	const getAddressByPlaceId = (place_id, city_name) => {
		common.post('Map&a=getAddressByPlaceId', {
			place_id
		}, data => {
			if (data) {
				data.city_name = city_name;
				app.globalData.delivery_address = data
				common.navigateBack()
			}
		}, _this, error => {
			console.log('选择地址页，用place_id换取地址信息错误');
		});
	};
	const getNearbyAddress = str => {
		var param = {
			lng: _this.current_address.lng,
			lat: _this.current_address.lat,
			lbs_type: 'baidu'
		};
		common.post('Shop_new&a=lbs_location', param, data => {
			if (data) {
				_this.nearbyAddress = data
	
				if (str) {
					var current_address = JSON.parse(JSON.stringify(data));
					delete current_address.pois;
	
					_this.current_address = current_address
				}
			}
		});
	};
	const getMyAddress = () => {
		if (app.globalData.is_login) {
			common.post('My&a=adress', {}, data => {
				console.log('我的收获地址', data);
				if (data) {
					_this.myAddress = data
				}
			});
		}
	};
	const searchAddress = () => {
		var param = {
			area_name: _this.city_name,
			query: _this.inputValue,
			lng: _this.current_address.lng,
			lat: _this.current_address.lat
		};
		common.post('Map&a=suggestion', param, data => {
			console.log('搜索地址结果', data);
			if (data) {
				_this.searchAddressList = data
			}
		});
	}; 
	// 获取位置授权
	const getAuthorization = () => {
		wx.getSetting({
			success: res => {
				if (res.authSetting['scope.userLocation'] == true) {
					//已授权
					// 用户已经同意小程序使用位置权限
					_this.openType = ''
				}
			}
		});
	};
	//获取id节点信息
	const getNodeInfo = (id, name) => {
		return new Promise((resolve, reject) => {
			// 筛选框的top值
			setTimeout(() => {
				wx.createSelectorQuery().select(id).fields({
					dataset: true,
					size: true,
					rect: true
				}, function(res) {
					_this[name] = res
	
					resolve(true);
				}).exec();
			}, 500);
		});
	};
	
</script>
<style>
	/* pages/shop_new/selectAddress/selectAddress.css */

	.mr5 {
		margin-right: 5px;
	}

	.bg {
		background: #fff;
	}

	.border-b {
		position: relative;
	}

	.border-b::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1rpx;
		width: 100%;
		background: #e5e5e5;
		transform: scaleY(0.5);
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #f4f4f4;
	}

	.search-box {
		padding: 10px;
		display: flex;
		align-items: center;
		font-size: 16px;
		background: #fff;
	}

	.search-box .search-input {
		background: #f5f5f5;
		border-radius: 5rpx;
		font-size: 16px;
		color: #333;
		display: flex;
		align-items: center;
		padding: 20rpx 0 20rpx 20rpx;
		box-sizing: border-box;
		height: 70rpx;
		flex: 1;
	}

	.search-box .search-input .icon-sousuo {
		margin-right: 10rpx;
		color: #999;
	}

	.search-box .search-input input {
		flex: 1
	}

	.search-box .search-input .icon-cha1 {
		color: #999;
		padding: 20rpx;
	}

	.title {
		color: #999;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.current-adress {
		padding: 10px;
		margin-bottom: 10px;
		background: #fff;
	}

	.current-adress .adress-box {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
	}

	.current-adress .adress-box .locate-btn {
		color: #06c1ae;
		line-height: 1;
		font-size: 14px;
		background: #fff;
		display: inline-block;
		padding: 0;
		margin: 0;
	}

	.current-adress .adress-box .locate-btn::after {
		border: none;
	}

	.adress-list .title {
		padding: 20px 10px 0;
		margin-bottom: 0;
	}

	.adress-list .title .add-address {
		float: right;
		color: #06c1ae;
	}

	.adress-list .title .add-address .iconfont {
		margin-right: 5px;
	}

	.adress-list .title .add-hover {
		background: #fff;
	}

	.adress-list .adress {
		margin-left: 30px;
		padding: 30rpx 10px 30rpx 0;
	}

	.adress-list .adress .desc {
		font-size: 16px;
		color: #333;
	}

	.adress-list .adress .info {
		font-size: 12px;
		color: #999;
		margin-top: 10px;
	}

	.adress-list .adress .info text {
		margin-right: 10px;
	}

	.adress-list .near:last-child.border-b::after {
		display: none;
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
	}

	.btn-box button {
		background: #fb4e44;
		border-radius: 0;
		color: #fff;
		font-size: 16px;
		height: 50px;
		line-height: 50px;
	}

	.btn-box .edit {
		background: #06c1ae;
		flex: 1;
	}

	.btn-box .edit-hover {
		background: #04ad9c
	}


	.mask {
		position: fixed;
		top: calc(71rpx + 20px);
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 9999;
	}

	.mask .adress-list {
		height: 100%;
	}

	.mask .adress-list .adress {
		margin: 0;
		padding: 20rpx 10px;
		background: #fff;
	}

	.mask .adress-list .distance {
		float: right;
		font-size: 12px;
		color: #999;
	}

	.mask .adress-list .adress .desc {
		font-size: 14px;
	}

	.mask .adress-list .adress .desc .active {
		color: #06c1ae;
	}

	.mask .adress-list .adress .info {
		margin-top: 5px;
		font-size: 14px;
	}
</style>
